import React from 'react';
import { Form, Input, Select, Row, Col, DatePicker, message, Icon, Upload, Button } from 'antd';
import { connect } from 'dva';
import TableData from '../../components/tableDatas';
import orderStatus from '../../common/database';
import { getLoginToken } from '../../utils/utils';
import styles from './index.less';

const { Option } = Select;
const namespace = 'returnManagement';
/**
 *  登录界面
 */
@connect(({ loading, returnManagement }) => {
  return {
    //控制状态，绑定事件
    loading: loading.effects['returnManagement/fetch'],
    dataList: returnManagement.dataList,
    pagination: returnManagement.pagination
  };
})
@Form.create()
class All extends React.Component {
  state = {
    tips: [
      {
        id: 0,
        title: 'Estimated Refund',
        money: '$50.00'
      },
      {
        id: 1,
        title: 'Order payment',
        money: '$350.00'
      },
      {
        id: 2,
        title: 'Standard Delivery change',
        money: '-$50.00'
      },
      {
        id: 3,
        title: 'Return cost',
        money: '-$50.00'
      }
    ]
  };

  // 搜索
  handleSubmit(e) {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        values.requestDate = values.requestDate ? values.requestDate.format('YYYY-MM-DD') : values.requestDate;
        values.status = values.status === '0' ? '' : values.status;
        this.props.dispatch({
          type: `${namespace}/fetch`,
          payload: { ...values, pageNum: 1 }
        });
      }
    });
  }
  // 清楚搜索框
  handleReset = () => {
    const { pagination, dispatch, form } = this.props;
    form.resetFields();
    dispatch({
      type: `${namespace}/fetch`,
      payload: {
        pageNum: pagination.current,
        pageSize: pagination.pageSize
      }
    });
  };
  // 导入
  handleUpload(file, fileList) {
    console.log(fileList, '数据222', file);
    this.props.dispatch({
      type: `${namespace}/uploadTemplate`,
      payload: {
        file
      }
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const { loading, dataList, pagination, handleDrawer } = this.props;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 24 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 }
      }
    };

    const config = {
      rules: [{ type: 'object', required: false, message: 'Please select time!' }]
    };

    const columns = [
      {
        title: 'Order number',
        dataIndex: 'orderNumber',
        key: 'orderNumber',
        render: (text, record) => (
          <a className={styles.orderNumber} onClick={() => handleDrawer(record)}>
            {text}
          </a>
        )
      },
      {
        title: 'Return number',
        dataIndex: 'returnNo',
        key: 'returnNo'
      },

      {
        title: 'Product name',
        key: 'productName',
        dataIndex: 'productName'
      },
      {
        title: 'SKU number',
        dataIndex: 'orderNumber',
        key: 'orderNumber'
      },
      {
        title: 'QTY',
        dataIndex: 'requestQty',
        key: 'requestQty'
      },
      {
        title: () => 'Total',
        dataIndex: 'estimatedRefund',
        key: 'estimatedRefund',
        render: text => <span>${text && text.toFixed(2)}</span>
      }
    ];

    const tableProps = {
      columns,
      dataSource: dataList,
      loading,
      pagination: {
        total: pagination.total,
        current: pagination.current,
        pageSize: pagination.pageSize,
        hideOnSinglePage: true,
        showQuickJumper: true,
        showSizeChanger: true,
        onChange: (page, pageSize) => {
          console.log(page, pageSize, '页码');
          this.props.dispatch({
            type: `${namespace}/fetch`,
            payload: {
              pageNum: page,
              pageSize
            }
          });
        },
        onShowSizeChange: (current, size) => {
          this.props.dispatch({
            type: `${namespace}/fetch`,
            payload: {
              pageNum: current,
              pageSize: size
            }
          });
        }
      },
      rowClassName: 'rows',
      rowKey: 'tables-index',
      onChange: (pagination, filters, sorter, extra) => {
        console.log('params', pagination, filters, sorter, extra);
      }
    };
    const props = {
      name: 'file',
      action: `${process.env.apiTest}/order/import`,
      headers: {
        Authorization: getLoginToken() ? getLoginToken() : ''
      },
      showUploadList: false,
      onChange: file => {
        if (file.file.status === 'done') {
          const res = file.file.response;
          if (res.code === 200) {
            message.success(res.msg || 'Operation succeeded');
            this.props.dispatch({
              type: `${namespace}/fetch`
            });
          } else {
            message.error(res.msg || '失败');
          }
        }
      }
    };
    return (
      <div className={styles.formItem}>
        <Form {...formItemLayout} onSubmit={e => this.handleSubmit(e)}>
          <Row gutter={16}>
            <Col className="gutter-row" span={4}>
              <Form.Item label="Return number">{getFieldDecorator('returnNo', {})(<Input />)}</Form.Item>
            </Col>
            <Col className="gutter-row" span={4}>
              <Form.Item label="Request date">{getFieldDecorator('requestDate', config)(<DatePicker />)}</Form.Item>
            </Col>
            <Col className="gutter-row" span={4}>
              <Form.Item label="Status">
                {getFieldDecorator(
                  'status',
                  {}
                )(
                  <Select defaultValue="0">
                    <Option value="0">{orderStatus[0].value}</Option>
                    <Option value="1">{orderStatus[1].value}</Option>
                    <Option value="2">{orderStatus[2].value}</Option>
                    <Option value="3">{orderStatus[3].value}</Option>
                    <Option value="4">{orderStatus[4].value}</Option>
                    <Option value="5">{orderStatus[5].value}</Option>
                    <Option value="6">{orderStatus[6].value}</Option>
                    <Option value="7">{orderStatus[7].value}</Option>
                    <Option value="8">{orderStatus[8].value}</Option>
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col className="gutter-row" span={4}>
              <Form.Item label="Received">
                {getFieldDecorator(
                  'received',
                  {}
                )(
                  <Select defaultValue="YES">
                    <Option value="YES">YES</Option>
                    <Option value="NO">NO</Option>
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col className="gutter-row searchBtn" span={12}>
              <Form.Item>
                <Button htmlType="submit" className="login-form-button searchBtns">
                  Search
                </Button>
              </Form.Item>
              <Form.Item>
                <Button htmlType="reset" onClick={this.handleReset} className="login-form-button resetBtn">
                  Reset
                </Button>
              </Form.Item>
              <Form.Item>
                <Upload {...props}>
                  <Button className="uploadBtn">
                    <Icon type="upload" /> Upload
                  </Button>
                </Upload>
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <TableData {...tableProps} />
      </div>
    );
  }
}
export default All;
